<script setup>
import { computed, ref } from "vue";
import { onMounted, onBeforeMount } from "vue";
import {
  apiGetPracticeInfo,
  apiReviewPractice,
  apiDeletePractice,
} from "../apis/practiceApi";
import SearchInput from "../components/SearchInput.vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();

const tableData = ref([]); //页面数据
const type = ref(0); //查询类型
const searchContent = ref(""); //查询内容
const tableSearch = ref(""); //快速文字匹配
const total = ref(1); //总条数
const currentPage = ref(1); //当前页数
const pageSize = ref(10);
const dialogDetailVisible = ref(false); //详情弹窗
const detailData = ref({}); //详情页数据
const editModalVisible = ref(false); //修改弹窗
const editModalData = ref({}); //修改弹窗数据
onBeforeMount(() => {
  //没有登录 重定向到登录页面
  if (!sessionStorage.getItem("token")) {
    ElMessage({
      message: "请先登录！",
      type: "warning",
    });
    router.replace("login");
  }
});
const filterTableData = computed(() =>
  tableData.value.filter(
    (item) =>
      !tableSearch.value ||
      JSON.stringify(item)
        .toLowerCase()
        .includes(tableSearch.value.toLowerCase())
  )
);
const getPracticeInfo = (params) => {
  const data = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    type: type.value,
    search: searchContent.value,
    ...params,
  };
  apiGetPracticeInfo(data).then((res) => {
    tableData.value = res.data;
    total.value = res.total;
  });
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  getPracticeInfo();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getPracticeInfo();
};
//查看详情
const handleDetail = (index, row) => {
  detailData.value = row;
  dialogDetailVisible.value = true;
};
//审核
const handleReview = (index, row) => {
  ElMessageBox.confirm("是否允许发布？", "审核", {
    confirmButtonText: "允许",
    cancelButtonText: "拒绝",
    type: "warning",
  })
    .then(() => {
      //todo 接口
      apiReviewPractice({
        practiceId: row.practiceId,
        userId: parseFloat(sessionStorage.getItem("userId")),
      }).then((res) => {
        if (res.practiceId) {
          ElMessage({
            message: "审批成功",
            type: "success",
          });
        }
        currentPage.value = 1;
        getPracticeInfo();
      });
    })
    .catch(() => {
      apiDeletePractice({ practiceId: row.practiceId }).then((res) => {
        if (res.practiceId) {
          ElMessage({
            message: "已删除",
            type: "success",
          });
        }
        getPracticeInfo();
      });
    });
  getPracticeInfo();
};
//修改
const handleEdit = (index, row) => {
  console.log("edit");
  editModalVisible.value = true;
  editModalData.value = row;
  // ElMessage({
  //   message: "功能正在开发...",
  //   type: "info",
  // });
};
//删除
const handleDelete = (index, row) => {
  ElMessageBox.confirm("确认删除吗？", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    apiDeletePractice({ practiceId: row.practiceId }).then((res) => {
      if (res.practiceId) {
        ElMessage({
          message: "已删除",
          type: "success",
        });
      }
      getPracticeInfo();
    });
  });
};
//查询条件
const handleSearch = (val, tag) => {
  searchContent.value = val;
  type.value = tag;
  currentPage.value = 1;
  pageSize.value = 10;
  getPracticeInfo();
};

const editModalVisibleChange = (val) => {
  console.log("ccccc");
  editModalVisible.value = val;
};

onMounted(() => {
  getPracticeInfo();
});
</script>

<template>
  <div style="padding: 0 20px">
    <div class="search">
      <SearchInput :searchFunc="handleSearch" />
    </div>
    <el-table :data="filterTableData" border height="500" style="width: 100%">
      <el-table-column label="编号" width="70" prop="practiceId">
      </el-table-column>
      <el-table-column label="公司名称" width="100" prop="company">
        <template #default="scope">
          <el-popover
            placement="top-start"
            :width="300"
            trigger="hover"
            :content="scope.row.companyInfo"
            v-if="scope.row.companyInfo"
          >
            <template #reference>
              {{ scope.row.company }}
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column label="公司简介" width="150" prop="companyInfo"> </el-table-column> -->
      <el-table-column label="实习岗位" width="120" prop="station">
      </el-table-column>
      <el-table-column label="岗位要求" prop="requirement">
        <template #default="scope">
          <div style="white-space: pre-wrap">{{ scope.row.requirement }}</div>
        </template>
      </el-table-column>
      <el-table-column label="工作内容" prop="work">
        <template #default="scope">
          <div style="white-space: pre-wrap">{{ scope.row.work }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="薪资待遇" width="100" prop="salary">
      </el-table-column> -->
      <el-table-column label="实习地址" width="120" prop="address">
      </el-table-column>
      <el-table-column align="center" width="200">
        <template #header>
          <el-input
            v-model="tableSearch"
            size="small"
            placeholder="根据文字匹配"
            ><template #prepend>检索</template></el-input
          >
        </template>
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleDetail(scope.$index, scope.row)"
            >查看详情</el-button
          >
          <el-button
            size="small"
            type="primary"
            v-if="scope.row.publishType === 2"
            @click="handleReview(scope.$index, scope.row)"
            >审核</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <div style="font-size: 12px; margin-top: 5px">
            <el-tag class="ml-2" type="info">
              发布时间：{{
                new Date(parseFloat(scope.row.currentTime)).toLocaleDateString()
              }}</el-tag
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, prev, pager, next, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog v-model="dialogDetailVisible" title="实习详情">
      <PracticeDetail :detailData="detailData" />
      <template #footer>
        <span class="dialog-footer">
          <el-button
            style="width: 200px"
            @click="dialogDetailVisible = false"
            type="primary"
            >关闭</el-button
          >
        </span>
      </template>
    </el-dialog>
    <EditModal
      v-if="editModalVisible"
      :formData="editModalData"
      :visibleChange="editModalVisibleChange"
    />
  </div>
  <!-- <el-empty v-if="tableData.length === 0" description="no data" /> -->
</template>
<style>
.el-input-group__append,
.el-input-group__prepend {
  width: 0;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.search {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.pagination {
  float: right;
  margin: 10px;
  height: 35px;
}
</style>
